<jsp:include page="header.jsp"></jsp:include>
<link rel="stylesheet" type="text/css" media="screen" href="jqGrid/themes/redmond/jquery-ui-1.8.16.custom.css" /> 
<link rel="stylesheet" type="text/css" media="screen" href="jqGrid/themes/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="jqGrid/themes/ui.multiselect.css" />
<style type="text/css"> 
        .ui-elipsis {text-overflow:ellipsis; -moz-binding:url('jqGrid/themes/ellipsis-xbl.xml#ellipsis') } 
</style> 
<script src="jqGrid/js/i18n/grid.locale-fr.js" type="text/javascript"></script> 
<script src="jqGrid/js/jquery.jqGrid.min.js" type="text/javascript"></script> 
<script src="jqGrid/js/jquery-ui-custom.min.js" type="text/javascript"></script> 
<script src="jqGrid/js/jquery.fmatter.js" type="text/javascript"></script> 
<script type="text/javascript">

jQuery(document).ready(function(){ 
   jQuery("#list1").jqGrid({
    url : 'MyDealServlet',
    datatype: 'xml',
    mtype: 'GET',
    colNames:['titre','description','prix','status'],
    colModel :[  
      {name:'titre', index:'titre', width:'60', align:'left',sortable:false,resizable:false,
    	  formatter:'showlink',
    	  formatoptions:{baseLinkUrl:"afficherImage2.jsp", id_Name: "idAnnonce",value:this.id, id :"test"}}, 
      {name:'description', index:'description',  align:'left',sortable:false,resizable:true}, 
      {name:'prix', index:'prix', width:'35', align:'center',sortable:true,resizable:false}, 
      {name:'status', index:'status', width:'110',align:'center',sortable:false,resizable:false} 
    ],
    pager: '#pager1',
    rowNum:10,
    hidegrid:false,
    toolbar:[true,'bottom'],
    sortname: 'titre',
    sortorder: 'desc',
    viewrecords: true,
    height:'600',
    width:'900',
    imgpath: 'themes/redmond/images',
    gridComplete: function() {
		searchColumn = jQuery('#list1').jqGrid('getCol','titre',true);
		jQuery("a[id='test']").fancybox({
			'transitionIn'	: 'elastic',
			'transitionOut'	: 'elastic'});
	},
    caption:'Recherche: <input type="search" id="gridsearch" placeholder="Recherche" results="0" class="gridsearch" />'
  }); 
//for live filtering search
  $('#gridsearch').keyup(function() {
  	var searchString = $('#gridsearch').val().toLowerCase();
  	jQuery.each(searchColumn,function() {
  		if(this.value.toLowerCase().indexOf(searchString) == -1) {
  			jQuery('#'+this.id).hide();
  		} else {
  			jQuery('#'+this.id).show();
   		}
  	});
  });
}); 

</script>
<jsp:include page="front.jsp"></jsp:include>
<div id="texteAccueil">
	        <table id="list1"></table>
        	<div id="pager1" ></div>

</div>
<jsp:include page="footer.jsp"></jsp:include>

